<template>
<el-row>
  <el-col :span="24">
    <div class="head-container">
      <el-input
        v-model="appName"
        placeholder="请输入应用名称"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"
      />
    </div>
    <div class="head-container">
      <el-tree
        v-loading="loading"
        :data="appOptions"
        :props="defaultProps"
        node-key="id"
        :highlight-current="true"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
        default-expand-all
        @node-click="handleNodeClick"
      />
    </div>
  </el-col>
</el-row>
</template>

<script>
import {listAppInfo} from "@/api/business/AppInfo";

export default {
  name: "index",
  // activated() {
  //   console.log('???????');
  // },
  data(){
    return {
      loading: false,
      // 应用名称
      appName: undefined,
      appOptions: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
      },
    }
  },
  created(){
    this.getList();
  },
  methods: {
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data){
      this.$emit('nodeClick', data);
    },
    getList(){
      this.loading = true;
      listAppInfo(this.queryParams).then(response => {
        this.appOptions = response.rows.map(item => {
          return {
            ...item,
            label: item.appName
          }
        });
        // this.total = response.total;
        this.loading = false;
      });
      // this.appOptions = [{label: 'xxxx应用一', id: 1},{label: 'xxxx应用二', id: 2},{label: 'xxxx应用三',id: 3},{label: 'xxxx应用四', id: 4}];
    }
  }
}
</script>

<style scoped>

</style>
